<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 13:30:57
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-02 15:28:22
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractFileSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同档案详情 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew title="合同详情" :showBack="true" />
    </template>
    <a-spin :loading="loading" tip="加载中" class="cantainer">
      <iframe
        class="iframe"
        v-if="fileList.length"
        style="width: 100%; height: 100%"
        :src="fileList[fileShowIndex].fileUrl"
        frameborder="0"
      />
      <div class="right">
        <div class="right-item" v-if="fileList.length">
          <div class="text">合同文件</div>
        </div>
        <div
          v-for="(item, index) in fileList.slice(0, 1)"
          :key="index"
          class="fileBody"
          :style="
            index === fileShowIndex ? 'color: rgb(var(--arcoblue-6))' : ''
          "
          @click="fileShowIndex = index"
        >
          <div class="text">{{ item.name }}.pdf</div>
        </div>
        <div class="right-item" v-if="fileList.length > 1">
          <div class="text">附件</div>
        </div>
        <div
          v-for="(item, index) in fileList.slice(1)"
          :key="index"
          class="fileBody"
          :style="
            index + 1 === fileShowIndex ? 'color: rgb(var(--arcoblue-6))' : ''
          "
          @click="fileShowIndex = index + 1"
        >
          <div class="text">{{ item.name }}.pdf</div>
        </div>
      </div>
    </a-spin>
    <footer>
      <a-space>
        <!-- <a-button @click="router.back()" class="btn">取消</a-button> -->
        <a-button
          @click="visible = true"
          class="btn"
          v-if="contractData.status === 1"
        >
          退回合同
        </a-button>
        <a-button
          @click="changeContractState('提交')"
          class="btn"
          type="primary"
          v-if="contractData.status === 1"
        >
          提交合同
        </a-button>
      </a-space>
      <a-modal
        v-model:visible="visible"
        @ok="changeContractState('退回')"
        @cancel="visible = false"
        title="请输入退回原因"
      >
        <a-input v-model="returnReason" />
      </a-modal>
    </footer>
  </ContentCard>
</template>

<script setup lang="ts">
import { htmlStrToPdf, paper } from '@/utils/printAndPdf';
import {
  SwitchDraftWaitSignedContract,
  DraftWaitSignedContractSavePutStatus,
  EditContractStatus
} from '@/apis/management/contract/contractManagement/waitSigned';

const router = useRouter();
let loading = ref(false);
let returnReason = ref('');
let visible = ref(false);
let changeContractState = async (status: '退回' | '提交') => {
  await Promise.all([
    DraftWaitSignedContractSavePutStatus({
      ids: [contractData.userId],
      status: status === '退回' ? 5 : 9
    }),
    EditContractStatus({
      id: contractData.id,
      status: status === '退回' ? 2 : 5,
      returnReason: returnReason.value
    })
  ]);
  router.back();
  return true;
};

let contractData = reactive<any>({});

let fileShowIndex = ref(0);
let fileList = ref<any[]>([]);
let loadData = async () => {
  loading.value = true;
  try {
    let data = JSON.parse(localStorage.getItem('myContractData') + '');
    Object.assign(contractData, data);
    fileList.value = (
      await Promise.all(
        (
          await Promise.all(
            data.children.map((item: any) => {
              return SwitchDraftWaitSignedContract({
                id: Number(localStorage.getItem('userId')),
                text: item.text,
                codes: item.codes
              });
            })
          )
        ).map((item: string) => {
          return htmlStrToPdf([item], paper.a4.width, paper.a4.height, 20);
        })
      )
    ).map((bolb, index) => {
      return {
        ...data.children[index],
        fileUrl: URL.createObjectURL(bolb)
      };
    });
  } catch (err) {
    console.log(err, 111111111);
  }
  loading.value = false;
};
loadData();
</script>

<style lang="less" scoped>
.cantainer {
  display: flex;
  justify-content: space-between;
  height: 80vh;

  .iframe {
    flex: 1;
    margin-right: 30px;
    height: 100%;
  }
  .right {
    width: 230px;
    box-shadow: 0px 0px 5px var(--color-neutral-8);

    .fileBody {
      border-bottom: 1px solid var(--color-neutral-4);
      display: flex;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      .text {
        padding: 10px 20px;
      }
    }

    &-item {
      border-bottom: 1px solid var(--color-neutral-4);
      padding: 10px 15px;
      .text {
        border-left: rgb(var(--arcoblue-6)) 5px solid;
        padding-left: 10px;
      }
    }
  }
}
.right {
  header {
    font-size: 16px;
    font-weight: 700;
    height: 28px;
    line-height: 28px;
    &::before {
      margin-left: 10px;
      display: inline-block;
      width: 6px;
      height: 20px;
      margin-right: 10px;
      background: #165dff;
      position: relative;
      top: 5px;
      border-radius: 3px;
    }
  }
  section {
    // 文字太长显示省略号，并且不换行
    .title {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;

      .item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &-select {
          background-color: #eee;
        }

        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}

.main {
  margin: 0 20px;
}

.right {
  .custom-radio-card {
    background-color: #fff;
  }
  .custom-radio-card:hover,
  .custom-radio-card-checked {
    border-color: rgb(var(--primary-6));
  }
}

:deep(.arco-radio-group .arco-radio) {
  margin: 0;
  width: 100%;
}
footer {
  z-index: 9;
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
